<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <!-- <form action="/">
      <van-field
        style="padding-left: 23px"
        left-icon="calendar-o"
        clickable
        readonly
        name="calendar"
        :value="range_date"
        placeholder="点击选择日期"
        @click="showCalendar = true"
        clearable
      />
    </form>
    <van-calendar
      type="range"
      v-model="showCalendar"
      :min-date="minDate"
      @confirm="onConfirm"
    /> -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group title="品鉴卡列表">
        <van-cell
          icon="gift-o"
          v-for="item in samples"
          :key="item.id"
          :title="item.card_name"
          :label="item.card_comment"
          is-link
          @click="onCellClick(item)"
        >
        <template>
          <van-tag round  :type="item.status==0? 'success': 'danger'">{{item.status_name}}</van-tag>
        </template>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";

import { getWxSampleCards } from "@/api/card";

export default {
  name: "SampleCardList",
  components: {
    NavBar,
  },

  computed: {},
  data() {
    return {
      title: this.$route.meta.title,

      samples: [],

      loading: false,
      finished: false,

      listQuery: {
        page: 1,
        page_size: 10,
        begin_date: null,
        end_date: null,
      },
    };
  },
  mounted() {},
  methods: {
    onLoad() {
      this.getClientSampleCards();
    },

    onCellClick(item) {
      console.log(item);
      this.$router.push({
        name: "Sample",
        params: { sample_key: item.key },
      });
    },

    getClientSampleCards() {
      this.loading = true;

      getWxSampleCards(this.listQuery)
        .then((res) => {
          console.log(res);
          if (res.data.results.length === 0) {
            this.samples = []; // 清空数组
            this.finished = true; // 停止加载
          }
          this.listQuery.page = res.data.page;
          this.samples.push(...res.data.results);
          this.loading = false;

          if (this.samples.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$notify({
            type: "danger",
            message: "获取数据失败！",
          });
        });
    },
  },
};
</script>

<style  scoped>
/* .van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
} */

.van-cell__title {
  flex: 3;
}
.van-cell__value {
  flex: 1;
}
.van-cell__label div {
  height: 20px;
}
.content .van-cell__title {
  flex: 1;
}
.content .van-cell__value {
  flex: 3;
}
</style>